import React, { useEffect, useState } from 'react'
import {getUserList} from '../../api/user'

import {Table} from 'antd'

const Index = () => {

  // 用户列表
  const [userList,setUserList] = useState(null)

  // 创建一个页码
  const [current, setCurrent] = useState(1)

  useEffect(()=>{
    getUserList().then(res => {
      // console.log(res);
      setUserList(res.data)
    })
  }, [])

  // 配置每列显示的字段
  const columns = [
    {
      title: '序号',
      dataIndex: 'userid',
      // render: 是用来自定义列数据显示用的
      render(text, record, index){
        /*
          text: 如果 dataIndex 中有设置，那么该参数就是 dataIndex 字段的值
                如果没有设置 dataIndex，那么该参数就是整条数据
          record：该参数为当前对象的所有内容，整条数据的值
          index: 当前列数据的索引值
        */ 
        // console.log(text, record, index);

        return <span>{(current - 1) * 10 + index + 1}</span>
      }
    },
    {
      title: '用户名',
      dataIndex: 'nickname',
    },
    {
      title: '验证码',
      dataIndex: 'telcode',
    },
    {
      title: '用户 id ',
      dataIndex: 'userid',
    },{
      title: '手机号',
      dataIndex: 'tel',
    }
  ];


  return (
    <div>
      <h1>用户列表</h1>

      <Table 
      dataSource={userList} 
      rowKey='userid'
      columns={columns} 
      pagination={{
        current,
        pageSize: 10,
        onChange(page,pageSize){
          // console.log(page,pageSize);
          setCurrent(page)
        }
      }}
      />
    </div>
  )
}

export default Index